<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件访问修饰符</title>
		
	</head>
	<body>
		<div id="app">
			数值{{num}}
		 <!-- 1. .stop 阻止事件冒泡-->
		 <div @click="addNum1">
			
			 <button @click="addNum2">自增</button>
			 <button @click.stop="addNum2">阻止自增</button>
		 </div>
			<hr />
			<form action="http://www.baidu.com">
				<input name="username" type="text" />
				<input name="password" type="password" />
				<button type="submit" @click.prevent="login">提交</button>
			</form>
		 
		 
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data: {
					num: 1
				},
				//定义vue对象中的方法
				methods: {
					addNum1(){
						this.num++
					},
					addNum2(){
						this.num++
					},
					login(){
						alert('实现ajax提交')
					}
					}
				
			})
		</script>
		
	</body>
</html>

